import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
import "../comp"

FluScrollablePage {

    title: qsTr("Bar Chart")

    FluFrame {
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart {
            anchors.fill: parent
            chartType: 'bar'
            chartData: {
                return {
                    "labels": ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    "datasets": [{
                            "label": 'My First Dataset',
                            "data": [65, 59, 80, 81, 56, 55, 40],
                            "backgroundColor": ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)'],
                            "borderColor": ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)'],
                            "borderWidth": 1
                        }]
                }
            }

            chartOptions: {
                return {
                    "maintainAspectRatio": false,
                    "title": {
                        "display": true,
                        "text": 'Chart.js Bar Chart - Stacked'
                    },
                    "tooltips": {
                        "mode": 'index',
                        "intersect": false
                    },
                    "responsive": true,
                    "scales": {
                        "xAxes": [{
                                "stacked": true
                            }],
                        "yAxes": [{
                                "stacked": true
                            }]
                    }
                }
            }
        }
    }

    FluFrame {
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart {
            anchors.fill: parent
            chartType: 'horizontalBar'
            chartData: {
                return {
                    "labels": ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    "datasets": [{
                            "label": 'My First Dataset',
                            "data": [65, 59, 80, 81, 56, 55, 40],
                            "backgroundColor": ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)'],
                            "borderColor": ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)'],
                            "borderWidth": 1
                        }]
                }
            }

            chartOptions: {
                return {
                    "maintainAspectRatio": false,
                    "title": {
                        "display": true,
                        "text": 'Chart.js HorizontalBar Chart - Stacked'
                    },
                    "tooltips": {
                        "mode": 'index',
                        "intersect": false
                    },
                    "responsive": true,
                    "scales": {
                        "xAxes": [{
                                "stacked": true
                            }],
                        "yAxes": [{
                                "stacked": true
                            }]
                    }
                }
            }
        }
    }
}
